<template>
    <el-row id="myRow1">
        <p id="myP1_left">
            <el-icon><Fold /></el-icon>
            <span style="color: #000;">用户管理</span>
            <span>/</span>
            <span>用户</span>
        </p>
        <p></p>
    </el-row>
    <el-row id="myRow2"></el-row>
    <el-form :inline="true" :model="myForm" id="myForm">
        <el-form-item>
            <el-input placeholder="请输入姓名或手机号" v-model="myForm.shoujihao"></el-input>
        </el-form-item>
        <el-form-item>
            <div class="demo-date-picker">
                <div class="block">
                <el-date-picker
                    v-model="myForm.value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间" 
                />
                </div>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-row id="myRow3">
        <el-button style="margin-bottom: 1em;"><el-icon><Download /></el-icon>导出</el-button>
        <el-button type="danger" style="margin-bottom: 1em;" @click="dialogAdd = true"><el-icon><Plus /></el-icon>添加</el-button>
        <el-button type="info" style="margin-bottom: 1em;"><el-icon><Refresh /></el-icon>刷新</el-button>
    </el-row>
    <el-table style="width: 100%;" border :data="tableData" @row-click="save">
        <el-table-column label="用户信息" prop="realname">
            <template #default="scoped">
                <span style="background-color: #EDF5FF;color: #57A6FC;padding:10px;font-size: 14px;border-radius: 3px;">{{ scoped.row.realname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="身份证号" prop="idCard"></el-table-column>
        <el-table-column label="昨日投递收益/元" prop="yesterdayEarning "></el-table-column>
        <el-table-column label="本月投递收益/元" prop="deliveryTotal"></el-table-column>
        <el-table-column label="余额/元" prop="balance"></el-table-column>
        <el-table-column label="设备数量/台" prop="devicesNumber"></el-table-column>
        <el-table-column label="操作" width="400">
            <template #default="scoped">
                <el-button @click="dialogReplace = true">编辑</el-button>
                <el-button @click="dialogChange = true" type="warning">余额变更</el-button>
                <el-button @click="dialogAdds = true" type="primary">新增设备</el-button>
                <el-button @click="dialogReplace = true" type="info">历史账单</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogAdd">
        <el-row style="font-size: 20px;position: relative;bottom: 1em;width: 10em;">新增设备持有者</el-row>
        <el-form :model="holderAdd" label-width="auto" style="padding-left: 5em;">
            <el-form-item label="持有人姓名" class="myFormItem1" required>
                <el-input v-model="holderAdd.realname"></el-input>
            </el-form-item>
            <el-form-item label="持有人手机号" class="myFormItem1" required>
                <el-input v-model="holderAdd.phone"></el-input>
            </el-form-item>
            <el-form-item label="持有人身份证号" required class="myFormItem1">
                <el-input v-model="holderAdd.idCard"></el-input>
            </el-form-item>
            <el-form-item label="余额/元" class="myFormItem1"> 
                <el-input v-model.number="holderAdd.balance" type="number"></el-input>
            </el-form-item>
            <el-form-item label="是否可提现">
                <el-radio-group v-model="holderAdd.isWithdraw"> 
                    <el-radio :value="1">是</el-radio>
                    <el-radio :value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-row style="justify-content: flex-end;margin-top: 3em;">
                <el-button @click="dialogAdd = false;clear();">取消</el-button>
                <el-button type="primary" @click="HolderAdd();dialogAdd = false;clear();">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    <el-dialog v-model="dialogReplace">
        <el-row style="font-size: 20px;position: relative;bottom: 1em;width: 10em;">编辑设备持有者</el-row>
        <el-form :model="myFormOne" label-width="auto" style="padding-left: 5em;">
            <el-form-item label="持有人姓名" class="myFormItem1" required>
                <el-input v-model="myFormOne.realname"></el-input>
            </el-form-item>
            <el-form-item label="持有人手机号" class="myFormItem1" required>
                <el-input v-model="myFormOne.phone"></el-input>
            </el-form-item>
            <el-form-item label="持有人身份证号" required class="myFormItem1">
                <el-input v-model="myFormOne.idCard"></el-input>
            </el-form-item>
            <el-form-item label="余额/元" class="myFormItem1"> 
                <el-input v-model="myFormOne.balance" disabled></el-input>
            </el-form-item>
            <el-form-item label="是否可提现">
                <el-radio-group v-model="myFormOne.isWithdraw">
                    <el-radio :value="1">是</el-radio>
                    <el-radio :value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="myFormOne.remark"></el-input>
            </el-form-item>
            <el-row style="justify-content: flex-end;margin-top: 3em;">
                <el-button @click="dialogReplace = false">取消</el-button>
                <el-button type="primary" @click="edit">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    <el-dialog v-model="dialogChange">
        <el-row style="font-size: 20px;position: relative;bottom: 1em;width: 10em;">余额变更</el-row>
        <el-form :model="myFormTwo" label-width="auto" style="padding-left: 5em;">
            <el-form-item label="持有人姓名" class="myFormItem1">
                <el-input v-model="myFormTwo.realname" disabled></el-input>
            </el-form-item>
            <el-form-item label="持有人手机号" class="myFormItem1">
                <el-input v-model="myFormTwo.phone" disabled></el-input>
            </el-form-item>
            <el-form-item label="持有人身份证号" class="myFormItem1">
                <el-input v-model="myFormTwo.idCard" disabled></el-input>
            </el-form-item>
            <el-form-item label="余额/元" class="myFormItem1"> 
                <el-input v-model.number="myFormTwo.balance" disabled></el-input>
            </el-form-item>
            <el-form-item label="变更类型">
                <el-radio-group v-model="myFormTwo.changeType">
                    <el-radio :value="1">新增</el-radio>
                    <el-radio :value="0">减少</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="变更金额/元" class="myFormItem1"> 
                <el-input v-model.number="myFormTwo.changeBalance" placeholder="请输入变更金额"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="myFormTwo.remark"></el-input>
            </el-form-item>
            <el-row style="justify-content: flex-end;margin-top: 3em;">
                <el-button @click="dialogChange = false">取消</el-button>
                <el-button type="primary" @click="balanceChange">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    <el-dialog v-model="dialogAdds">
        <el-row style="font-size: 20px;position: relative;bottom: 1em;width: 10em;">新增设备</el-row>
        <el-form :model="addDevice" label-width="auto">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="持有人姓名" class="myFormItem2">
                        <el-input v-model="addDevice.realname" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="持有人手机号" class="myFormItem2">
                        <el-input v-model="addDevice.phone" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="公司" class="myFormItem2">
                        <el-select v-model="addDevice.orginzation">
                            <option :value="1">1</option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择设备所在位置" class="myFormItem2">
                        <div style="color: green;cursor: pointer;" @click="goto">点击进入坐标拾取器</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="邀请人">
                <el-input v-model="addDevice.inviterI" type="number"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="购买台数/台" class="myFormItem2" required>
                        <el-input v-model="addDevice.num" type="number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备单价/元/台" class="myFormItem2" required>
                        <el-input v-model="addDevice.price" type="number"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="单台月租金/元/台" class="myFormItem2" required>
                <el-input v-model="addDevice.rent" type="number"></el-input>
            </el-form-item>
            <el-row>
               <el-col :span="12">
                    <el-form-item label="收款人姓名" class="myFormItem2" required>
                        <el-input v-model="addDevice.bankName"></el-input>
                    </el-form-item> 
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收款人银行卡号" class="myFormItem2" required>
                        <el-input v-model="addDevice.bankId"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="开户银行" class="myFormItem2" required>
                        <el-input v-model="addDevice.bank"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支行" class="myFormItem2" required>
                        <el-input v-model="addDevice.bankBranch"></el-input>
                        
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="合同起止日期">
                <div class="demo-date-picker">
                    <div class="block">
                    <el-date-picker
                        v-model="myDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                    </div>
                </div>
            </el-form-item>
            <el-row style="justify-content: flex-end;margin-top: 3em;">
                <el-button @click="dialogAdds = false">取消</el-button>
                <el-button type="primary" @click="added">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="obj.pageIndex"
        :page-sizes="[1,2,3,4,5,6,7,8,9]"
        :page-size="obj.pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        class="pagination"
        background
        style="margin-top: 3em;"
    />
</template>
<script setup>
    import { reactive,ref } from 'vue';
    import axios from 'axios';
    let dialogReplace = ref(false);
    let dialogAdd = ref(false)
    let dialogChange = ref(false)
    let dialogAdds = ref(false)
    let total = ref(0)
    let position = ref([])
    let myDate = ref([])
    let obj = reactive({
        pageIndex:1,
        pageSize:5,
        keyword:'',
        startTime:'',
        endTime:''
    })
    let myForm = reactive({
        shoujihao:'',
        value1:''
    })
    let myFormOne = reactive({
        realname:'',
        phone:'',   
        balance:'',
        isWithdraw:0,
        idCard:'',
        remark:''
    })
    let myFormTwo = reactive({
        realname:'',
        phone:'',
        idCard:'',
        balance:0,
        changeBalance:0,
        changeType:0,   
        remark:''
    })
    let addDevice = reactive({
        realname:'',
        phone:'',
        orginzation:1,
        inviterI:'',
        num:'',   
        bankName:"",
        bank:"",
        contractStart:myDate.value[0] || '',
        contractEnd:myDate.value[1] || '',
        bankId:"",
        bankBranch:"",
        price:'',
        x:"116.41972568910812",
        y:"39.866006970608886"
    })
    let holderAdd = reactive({
        realname:'',
        phone:'',
        idCard:'',
        balance:'',
        isWithdraw:1
    })
    let tableData = ref([])
    let device = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/equipment_holder/equipment_holderList",obj,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(res){
            tableData.value = res.data.dataset.List;
            total.value = res.data.dataset.totalSize;
        })
    }
    device();
    let HolderAdd = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/equipment_holder/addEquipmentHolder",holderAdd,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(){
            device()
        })
    }
    let edit = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/equipment_holder/updateHolderInfo",myFormOne,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(){
            device();
            dialogReplace.value = false;
        })
    }
    let balanceChange = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/equipment_holder/updateBanlance",myFormTwo,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(res){
            console.log(res)
            device();
            dialogChange.value = false;
        })
    }
    let added = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/equipment_holder/addEquipment",addDevice,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(res){
            console.log(res)
            device();
            dialogAdds.value = false;
        })
    }
    let save = (value) => {
        myFormOne.realname = value.realname;
        myFormOne.phone = value.phone;
        myFormOne.balance = value.balance;
        myFormOne.id = value.id
        myFormOne.idCard = value.idCard
        myFormTwo.realname = value.realname;
        myFormTwo.phone = value.phone;
        myFormTwo.balance = value.balance;
        myFormTwo.id = value.id
        myFormTwo.idCard = value.idCard
        if(!myFormTwo.balance){
            myFormTwo.balance = 0
        }
        addDevice.realname = value.realname;
        addDevice.phone = value.phone;
    }
    let clear = () => {
        holderAdd.realname = '';
        holderAdd.phone = '';
        holderAdd.idCard = '';
        holderAdd.balance = '';
        holderAdd.isWithdraw = 1;
    }
    let handleCurrentChange=(newPage)=>{
        obj.pageIndex= newPage;
        device(); // 重新获取数据
    }
    let handleSizeChange=(newPage)=>{
        obj.pageSize= newPage;
        device(); // 重新获取数据
    }
</script>

<style scoped lang="less">
    #myRow1{
        border-bottom: 1px solid #ccc;
        padding: 0 1em;
        box-sizing: border-box;
        height: 3em;
        display: flex;
    }
    #myP1_left{
        height: 100%;
        display: flex;
        align-items: center;  
        margin: 0;
        span{
            font-size: 14px;     
            margin-left: 0.7em;  
            color: #9AAABF; 
        }
    }
    #myRow2{
        height: 40px;
        align-items: center;
        padding: 0 1em;
        border-bottom: 1px solid #ccc;
    }
    #myForm{
        padding-left: 1.2em;
        padding-top: 1.3em;
        .el-form-item{
            width: 13%;
        }
        button{
            margin-left: 10em;
        }
    }
    #myRow3{
        justify-content: flex-end;
        padding: 0 1em;
    }
    .myFormItem1{
        width: 45%;
    }
    .myFormItem2{
        width: 85%;
    }
</style>